<template>
	<view>
		<view v-if="data.length">
			<order class="item" v-for="(item, index) in data" :key="index" :item="item">
				<view slot="status" class="ticker">
					<view class="view">等待付款</view>
					<view class="view">
						{{ getTime(item.expire) }}
					</view>
				</view>


				<view class="btns" slot="btn">
					<view class="view cancelBtn" @click="cancel(item.i)" >取消订单</view>
					<view class="view" @click="pay(item)">去支付</view>

				</view>
			</order>
		</view>
		<empty v-if="isEmpty 
		&& activedIndex == 1" style="background-color: rgb(242, 242, 242)" description="空空如也" />
		<pay-order v-if="paying" :price="price.toString()" :self="true" @close="paying = false" @success="payConfirm" />
	</view>
</template>

<script>
	import Order from "components/common/Order/Order";


	import Empty from "@/components/common/Empty/Empty";
	import {
		cancelOrder,
		PayOrder,
		unpayOrder
	} from "network/user";
	import {
		hasPayPwd,
		validPayPwd
	} from "network/user";
	import payOrder from "pages/cart/pay/payOrder";

	export default {
		components: {
			Order,
			Empty,
			payOrder,
		},
		props: ["activedIndex"],
		data() {
			return {
				data: [],
				isEmpty: false,
				hasPayPwd: null,
				paying: false,
				price: 0,
				i: 0,
			};
		},
		computed: {},
		watch: {},
		methods: {
			getTime(expire) {
				let timer = new Date(new Date(expire).getTime() - Date.now());
				let hours = timer.getHours(),
					minutes = timer.getMinutes();
				if (hours === 0 && minutes === 0) {
					return `23小时59分钟`;
				}
				return `${hours}小时${minutes}分钟`;
			},

			cancel(i) {

				uni.showModal({
					title: "取消订单",
					content: `确认取消订单?`,
					showCancel: true,
					confirmText: "确定",
					success: async (res) => {
						if (res.confirm) {
							await cancelOrder(JSON.stringify({
								i
							})).then((res) => {
								if (res[1].data.tag) {
									this.success("已取消订单");
									this.reload();
								}
							});
						} else {
							uni.showToast({
								title: "已取消"
							})
						}
					},
				})

			},
			pay(item) {
				this.price = item.price;
				this.i = item.i;
				this.paying = true;
			},
			payConfirm() {
				this.paying = false;

				PayOrder(JSON.stringify({
					i: this.i
				})).then((res) => {
					if (res[1].data.tag) {
						this.success("支付成功");
						this.loadOrder();
					}
				});

			},
			loadOrder() {
				unpayOrder().then((res) => {
					let arr = [];
					for (let item of res[1].data.data) {
						let {
							created,
							expire,
							price,
							count,
							i
						} = item,
						data = JSON.parse(item.data);
						arr.push({
							created,
							expire,
							data,
							price,
							count,
							i
						});
					}
					if (arr.length === 0) {
						this.isEmpty = true;
						this.$emit("empty", true);
					} else {
						this.$emit("empty", false);
					}
					this.$set(this, "data", arr);
				});
			},

			async validPayPwd(i) {
				await this.$prompt("请输入支付密码", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						inputPattern: /^[0-9]{6}$/,
						inputErrorMessage: "密码由六位数字组成",
						closeOnClickModal: false,
					})
					.then(async ({
						value
					}) => {
						let pwd = {
							pwd: value
						};
						await validPayPwd(JSON.stringify(pwd)).then(async (res) => {
							if (res.data.tag) {
								await PayOrder(JSON.stringify({
									i
								})).then((res) => {
									if (res.data.tag) {
										this.success("支付成功");
										this.loadOrder();
									}
								});
							} else {
								this.warning("密码错误");
							}
						});
					})
					.catch((e) => {
						this.warning("已取消支付");
					});
			},
		},
		created() {
			this.loadOrder();
			hasPayPwd().then((res) => {
				this.hasPayPwd = res[1].data.tag;
			});
		},
		mounted() {},
	};
</script>
<style lang="scss" scoped>
	.item {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100vw;
		padding: 20rpx 5vw;
		/* #ifdef H5 */
		gap: 20rpx;
		/* #endif */
		background-color: white;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.ticker {
		display: flex;
		flex-direction: row;
		font-size: 26rpx;
		font-weight: 600;
		width: auto;
		height: 1.6rem;
		line-height: 1.6rem;
		align-items: center;
	}

	.ticker > .view:nth-child(1) {
		background-color: rgb(253, 44, 23);
		color: white;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		z-index: 1;
	}

	.ticker > .view:nth-child(2) {
		padding-left: 20rpx;
		padding-right: 10rpx;
		margin-left: -20rpx;
		background-color: rgb(253, 217, 213);
		color: rgb(254, 98, 80);
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.cancelBtn {
		color: gray;
		border-color: grey;
	}

	.btns {

		display: flex;
		flex-direction: row-reverse;
		align-items: center;

		/* #ifdef H5 */
		gap: 40rpx;
		/* #endif */

		/* #ifdef MP-WEIXIN || APP */
		width: 100%;

		/* #endif */

		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.btns .view {
		height: 60rpx;
		border-radius: 30rpx;
		width: 160rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: red;
		font-weight: 550;
	}

	// border: 2rpx solid rgb(254, 191, 184);

	.btns .view:nth-child(1) {
		border: 2rpx solid rgb(219, 219, 219);
		color: gray;
	}

	/* #ifdef MP-WEIXIN || APP */
	.btns .view:nth-child(1) {
		margin-left: 20rpx;
	}

	/* #endif */

	.btns .view:nth-child(2) {
		border: 2rpx solid rgb(254, 191, 184);
	}
</style>
